<template>
	<!-- <view class="header">
		<uni-search-bar style="flex: 1;" class="uni-mt-10" radius="5" placeholder="请输入关键字……" bgColor="#e8e8e8"
			clearButton="auto" cancelButton="none" @confirm="search" />
		<uni-icons @clik="iconBack" style="padding-right: 20rpx;" type="cart-filled" size="30"></uni-icons>

	</view> -->
	<view class="container">
		<!-- 侧边栏 -->
		<view class="sidebar">
			<view v-for="(item, index) in tabs" :key="index" :class="['tab', { active: activeTab === index }]"
				@click="getGoodsList(item.id);activeTab=index">
				<view class="icon" :class="{ 'icon-active': activeTab === index }">
					<image :src="activeTab === index ? item.img : item.img" alt=""
						style="width: 40rpx; height: 40rpx;" />
				</view>
				<text>{{ item.type }}</text>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<view class="rightSon">
				<view class="rightSonItem" v-for="SonItem in TypeChildren" :key="SonItem">
					<view style="font-size: 32rpx; font-weight: 600;">
						{{SonItem.type}}
					</view>
					<view class="goodList">
						<view v-for="goodsItem in SonItem.children"  @click="toList(goodsItem.id)" class="goodsItem">
							<view class="img" :style="{backgroundImage:`url(${goodsItem.goods_thumb_img})`}"></view>
							<view>{{goodsItem.goods_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import DefaultComponent from "./components/DefaultComponent.vue"
	import {
		getTypeList,
		getTypeListByPid
	} from "../../api/index.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	const TypeChildren = ref([])
	// 侧边栏数据
	const tabs = ref([]);

	function getList() {
		getTypeList().then(e => {
			console.log(e.data, 42)
			tabs.value = e.data
			// 根据第0条数据 获取 商品列表
			// TypeChildren.value = e.data[0].children
			// console.log(e.data[0],58)
			getGoodsList( e.data[0].id)
		})
	}
	function toList(id){
		uni.navigateTo({
			url: '/chanPin/pages/xiLieXiangQing?id='+id
		});
	}
	function getGoodsList(tid) {
		getTypeListByPid(tid).then(e => {
			console.log(e, 63)
			TypeChildren.value = e.data
		})
	}

	onShow(() => {
		getList()
	})
	const reatchBack = () => {
		uni.navigateTo({
			url: '/index/pages/search/index'
		})
	}
	const iconBack = () => {
		uni.navigateTo({
			url: '/index/pages/search/index'
		})
	}
	// 当前选中的侧边栏项
	const activeTab = ref(0);

	// 切换侧边栏项
	const switchTab = (index) => {
		// console.log(index)
		activeTab.value = index;
	};

	// 内容区域数据
	const list = ref([]);
</script>

<style scoped>
	.header {
		display: flex;
		align-items: center;
		height: 9vh;
	}

	.container {
		display: flex;
		height: 100vh;
		overflow: hidden;
	}

	.sidebar {
		width: 200rpx;
		background-color: #f0f0f0;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.tab {
		padding: 20rpx;
		text-align: center;
		cursor: pointer;
		width: 100%;
	}

	.tab.active {
		background-color: #E60012;
		color: white;
	}

	.icon {
		width: 100%;
		height: 40rpx;
		margin-bottom: 10rpx;
	}

	.icon-active img {
		/* filter: invert(100%); */
	}

	.content {
		flex: 1;
		padding: 20rpx;
		background-color: #f7f5f5;
	}

	.rightSon {
		/* background-color: #007aff; */
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		/* display: grid;
		grid-template-columns: 1fr 1fr; */
		/* 两列等宽 */
		/* gap: 10rpx; */
		/* 列间距 */


	}
	.goodList{
		margin: 20rpx 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10rpx;
	}
	.goodsItem{
		background-color: #fff;
		padding: 10rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.img{
		height: 200rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		
	}
	.rightSonItem {
	/* 	display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		background-color: #ffffff;
		border-radius: 5rpx;
		height: 270rpx; */
	}
</style>